<template>
  <div>
    <div class="header_wrap">
      <div class="header_left"> 
        <img src="../assets/sislogo.png" alt="">
        <div>
          <h1>进思学校后台管理系统</h1>
          <h1>prothink-educaction</h1>
        </div>
      </div>
      <div class="header_right">
           <el-link><i class="el-icon-view el-icon--right"></i> 走进进思 </el-link>
            <el-link><i class="el-icon-view el-icon--right"></i> 常见问题 </el-link>
             <el-link><i class="el-icon-view el-icon--right"></i> 在线客服 </el-link>
              <el-link @click="open"><i class="el-icon-view el-icon--right"></i> 安全中心 </el-link>
               <el-link @click="quit"><i class="el-icon-view el-icon--right"></i> 退出 </el-link>
              <el-link> {{userObj.turename}} </el-link>
              <el-link>
                <img src="../assets/sislogo.png" alt="">
              </el-link>
      </div>
    </div>
    <!-- 修改密码的弹出层布局 -->
    <el-dialog @close="toClear" width="50%" :visible.sync="passFlag" title="修改密码">
        <el-form ref="editForm" label-width="100px" :model="passObj" :rules="rules">
          <el-form-item label="原密码：" prop="userPwd">
              <el-input v-model="passObj.userPwd" placeholder="原密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPwd">
            <el-input v-model="passObj.newPwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="surePwd">
            <el-input v-model="passObj.surePwd"></el-input>
          </el-form-item>
        </el-form>
        <!-- 弹出层的脚步插槽 -->
      <template slot="footer">
          <el-button @click="close">取消</el-button>
          <el-button type="success" @click="toEdit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {EditPassword,getUserInfo,quitLogin} from '../api/home';
export default {
  name: 'Vuepro2209HedaerCom',

  data() {
    return {
      passFlag:false,//密码弹出层的 显示隐藏
      passObj:{ //修改密码表单的v-model
        userPwd:"",//原密码
        newPwd:"",//新密码
        surePwd:""//确认密码
      },
      userObj:{},//用户信息数据
      rules:{//表单验证规则
        userPwd:[{required:true,message:"原密码必填",trigger:'blur'}],
        newPwd:[{required:true,message:"新密码必填",trigger:'blur'}],
        surePwd:[{required:true,message:"确认密码必填",trigger:'blur'}],
      }
    };
  },
  created(){
    this.getUser();
  },
  mounted() {
    
  },

  methods: {
    // 后台存储用户登录信息的方案 
    // 非token 方案  后端的session类似于前端的 storage
    // 退出登录就是让后端 从session 去除当前登录的用户信息
    async quit(){ //退出登录
      let res=await quitLogin();
      console.log(res,"-------")
      if(res.data.success){
          // 清空登录时候存储的tokenId
          localStorage.tokenId=""
          // 退出登录 初始化权限编码
         this.$store.commit("setPower",0)
        //  退出登录回到登录页面
        this.$message.success({
          message:"退出登录成功,回到登录页",
          duration:500
        })
        this.$router.replace("/login")
      }
    },
    async getUser(){ //获取用户信息
      let res=await getUserInfo()
      console.log(res,"----7777")
      this.userObj=res.data;
      // 获取到用户信息 像vuex存储当前的权限编码
      this.$store.commit("setPower",res.data.powerCode)
    },
    toClear(){//遮罩层关闭事件的函数
      // 重置表单清空表单
      this.$refs.editForm.resetFields()
    },
    close(){ 
      this.passFlag=false;//关闭弹出层
    },
    open(){
      this.passFlag=true;//点击安全中心打开弹出层
    },
    toEdit(){ //去修改密码
        // 调用表单的验证方法
        this.$refs.editForm.validate().then(async ()=>{
          // 新密码和确认密码一致
            if(this.passObj.newPwd==this.passObj.surePwd){
                let res=await EditPassword(this.passObj)
                console.log(res,"-------")
                if(res.data.success){
                  this.$message.success({
                    message:"修改密码成功，重新登录",
                    duration:500
                  })
                  // 重置表单清空表单
                  this.$refs.editForm.resetFields()
                  // 修改密码成功 跳到登录
                  this.$router.replace("/login")
                }
            }else{
               this.$message.error("俩次输入的密码不一致")
            }
             
        })
  
    }
  },
};
</script>
<style lang="less">
    .header_wrap{
      
      display:flex;
        justify-content:space-between;
        align-items:center;
        color:white;
        font-size:20px;
        .header_left{
            display:flex;
              align-items:center;
        }
        .header_right{
           display:flex;
        align-items:center;
          .el-link{
            font-size:20px;
            color:white;
            margin-left:20px;
            cursor:pointer;
          }
        }
      img{
        width:50px;
        height:50px;
        margin-left:10px;
        margin-right:10px;
      }
    }
</style>